<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>账号限制通知</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f5f7;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    
    .container {
      max-width: 400px;
      width: 100%;
    }
    
    .blackroom-card {
      background-color: white;
      border-radius: 16px;
      padding: 30px 20px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    
    .icon-container {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin: 0 auto 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
    }
    
    .title {
      font-size: 22px;
      font-weight: 600;
      margin-bottom: 16px;
      color: #1d1d1f;
    }
    
    .description {
      font-size: 15px;
      line-height: 1.6;
      color: #6e6e73;
      margin-bottom: 24px;
    }
    
    .details {
      background-color: #f5f5f7;
      border-radius: 12px;
      padding: 16px;
      text-align: left;
      margin-bottom: 24px;
    }
    
    .detail-item {
      display: flex;
      margin-bottom: 12px;
      font-size: 14px;
    }
    
    .detail-item:last-child {
      margin-bottom: 0;
    }
    
    .detail-label {
      color: #6e6e73;
      min-width: 90px;
    }
    
    .detail-value {
      color: #1d1d1f;
      flex: 1;
    }
    
    .btn {
      display: block;
      width: 100%;
      padding: 12px;
      border-radius: 10px;
      font-weight: 500;
      font-size: 16px;
      transition: all 0.2s;
      border: none;
      cursor: pointer;
      text-decoration: none;
    }
    
    .btn-primary {
      background-color: #0071e3;
      color: white;
      margin-bottom: 12px;
    }
    
    .btn-primary:hover {
      background-color: #0077ed;
      color: white;
    }
    
    .btn-secondary {
      background-color: #f5f5f7;
      color: #1d1d1f;
    }
    
    .btn-secondary:hover {
      background-color: #ebebeb;
    }
    
    .appeal-link {
      color: #0071e3;
      text-decoration: none;
      font-size: 15px;
      display: inline-block;
      margin-top: 16px;
    }
    
    .appeal-link:hover {
      text-decoration: underline;
    }
    
    /* 各种风格的特定样式 */
    /* 1. 标准限制通知 */
    #style1 .icon-container {
      background-color: #fef3c7;
      color: #d97706;
    }
    
    /* 2. 账号封禁通知 */
    #style2 {
      background-color: #121212;
    }
    
    #style2 .blackroom-card {
      background-color: #1e1e1e;
    }
    
    #style2 .title {
      color: #ffffff;
    }
    
    #style2 .description {
      color: #bbbbbb;
    }
    
    #style2 .details {
      background-color: #2d2d2d;
    }
    
    #style2 .detail-label {
      color: #999999;
    }
    
    #style2 .detail-value {
      color: #ffffff;
    }
    
    #style2 .btn-secondary {
      background-color: #333333;
      color: #ffffff;
    }
    
    #style2 .btn-secondary:hover {
      background-color: #444444;
    }
    
    #style2 .icon-container {
      background-color: #370617;
      color: #dc2f2f;
    }
    
    /* 3. 临时限制通知 */
    #style3 .icon-container {
      background-color: #dbeafe;
      color: #2563eb;
    }
    
    #style3 .timer {
      font-size: 20px;
      font-weight: 600;
      color: #2563eb;
      margin: 16px 0;
    }
    
    /* 4. 内容限制通知 */
    #style4 .icon-container {
      background-color: #def7ec;
      color: #059669;
    }
    
    #style4 .restricted-content {
      border-left: 3px solid #059669;
      padding-left: 12px;
      margin-bottom: 20px;
      text-align: left;
      font-size: 14px;
      color: #374151;
    }
    
    /* 5. 轻度警告通知 */
    #style5 .blackroom-card {
      border: 1px solid #fee2e2;
    }
    
    #style5 .icon-container {
      background-color: #fee2e2;
      color: #ef4444;
      width: 60px;
      height: 60px;
      font-size: 24px;
    }
    
    #style5 .title {
      font-size: 20px;
      color: #b91c1c;
    }
    
    #style5 .warning-badge {
      display: inline-block;
      background-color: #fee2e2;
      color: #dc2626;
      font-size: 12px;
      padding: 3px 10px;
      border-radius: 12px;
      margin-bottom: 16px;
    }
    
    /* 6. 身份验证提醒 */
    #style6 .icon-container {
      background-color: #f0fdfa;
      color: #0d9488;
    }
    
    #style6 .verification-steps {
      text-align: left;
      margin-bottom: 24px;
    }
    
    #style6 .step {
      display: flex;
      margin-bottom: 16px;
      align-items: flex-start;
    }
    
    #style6 .step-number {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background-color: #0d9488;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      margin-right: 12px;
      flex-shrink: 0;
    }
    
    #style6 .step-content {
      flex: 1;
    }
    
    #style6 .step-title {
      font-weight: 500;
      font-size: 15px;
      margin-bottom: 4px;
    }
    
    #style6 .step-desc {
      font-size: 13px;
      color: #6e6e73;
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher" style="position: fixed; top: 10px; right: 10px; z-index: 1000; background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 8px;">
    <button class="style-btn active btn-sm" data-style="style1" style="border: none; background: none; padding: 4px 8px; cursor: pointer; font-size: 12px;">标准限制</button>
    <button class="style-btn btn-sm" data-style="style2" style="border: none; background: none; padding: 4px 8px; cursor: pointer; font-size: 12px;">账号封禁</button>
    <button class="style-btn btn-sm" data-style="style3" style="border: none; background: none; padding: 4px 8px; cursor: pointer; font-size: 12px;">临时限制</button>
    <button class="style-btn btn-sm" data-style="style4" style="border: none; background: none; padding: 4px 8px; cursor: pointer; font-size: 12px;">内容限制</button>
    <button class="style-btn btn-sm" data-style="style5" style="border: none; background: none; padding: 4px 8px; cursor: pointer; font-size: 12px;">轻度警告</button>
    <button class="style-btn btn-sm" data-style="style6" style="border: none; background: none; padding: 4px 8px; cursor: pointer; font-size: 12px;">身份验证</button>
  </div>
  
  <!-- 1. 标准限制通知 -->
  <div id="style1" class="blackroom-style active">
    <div class="container">
      <div class="blackroom-card">
        <div class="icon-container">
          <i class="fa fa-exclamation-triangle"></i>
        </div>
        <h1 class="title">账号功能已受限</h1>
        <p class="description">
          由于您的账号近期存在违反社区规定的行为，部分功能已被限制使用。
        </p>
        
        <div class="details">
          <div class="detail-item">
            <div class="detail-label">限制原因：</div>
            <div class="detail-value">发布违规内容</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">限制时间：</div>
            <div class="detail-value">2023-10-28 至 2023-11-04</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">受限功能：</div>
            <div class="detail-value">发布内容、评论、私信</div>
          </div>
        </div>
        
        <button class="btn btn-primary">查看社区规定</button>
        <button class="btn btn-secondary">了解详情</button>
        
        <a href="#" class="appeal-link">对限制有异议？申请解封</a>
      </div>
    </div>
  </div>
  
  <!-- 2. 账号封禁通知 -->
  <div id="style2" class="blackroom-style">
    <div class="container">
      <div class="blackroom-card">
        <div class="icon-container">
          <i class="fa fa-lock"></i>
        </div>
        <h1 class="title">账号已被永久封禁</h1>
        <p class="description">
          您的账号因多次严重违反社区规定且情节恶劣，已被永久封禁，无法恢复。
        </p>
        
        <div class="details">
          <div class="detail-item">
            <div class="detail-label">封禁原因：</div>
            <div class="detail-value">多次发布违规内容且不整改</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">封禁时间：</div>
            <div class="detail-value">2023-10-28 永久封禁</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">关联影响：</div>
            <div class="detail-value">该设备已被标记，无法注册新账号</div>
          </div>
        </div>
        
        <button class="btn btn-primary">查看违规记录</button>
        <button class="btn btn-secondary">联系客服</button>
      </div>
    </div>
  </div>
  
  <!-- 3. 临时限制通知 -->
  <div id="style3" class="blackroom-style">
    <div class="container">
      <div class="blackroom-card">
        <div class="icon-container">
          <i class="fa fa-clock-o"></i>
        </div>
        <h1 class="title">账号临时受限</h1>
        <p class="description">
          您的账号因疑似异常操作，已被临时限制使用。限制将在指定时间后自动解除。
        </p>
        
        <div class="timer" id="countdown">12:45:30</div>
        
        <div class="details">
          <div class="detail-item">
            <div class="detail-label">限制原因：</div>
            <div class="detail-value">异地登录异常</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">限制开始：</div>
            <div class="detail-value">2023-10-28 08:30</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">预计解除：</div>
            <div class="detail-value">2023-10-28 21:15</div>
          </div>
        </div>
        
        <button class="btn btn-primary">立即解除限制</button>
        <button class="btn btn-secondary">取消</button>
      </div>
    </div>
  </div>
  
  <!-- 4. 内容限制通知 -->
  <div id="style4" class="blackroom-style">
    <div class="container">
      <div class="blackroom-card">
        <div class="icon-container">
          <i class="fa fa-eye-slash"></i>
        </div>
        <h1 class="title">部分内容已被限制</h1>
        <p class="description">
          您发布的部分内容因违反社区规定已被限制展示，其他功能不受影响。
        </p>
        
        <div class="restricted-content">
          "这家店的服务太差了，简直是垃圾，再也不会来了..."
        </div>
        
        <div class="details">
          <div class="detail-item">
            <div class="detail-label">限制原因：</div>
            <div class="detail-value">包含不适当言论</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">限制内容：</div>
            <div class="detail-value">1条动态，2条评论</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">处理方式：</div>
            <div class="detail-value">内容隐藏，仅自己可见</div>
          </div>
        </div>
        
        <button class="btn btn-primary">修改内容</button>
        <button class="btn btn-secondary">我知道了</button>
        
        <a href="#" class="appeal-link">申请恢复展示</a>
      </div>
    </div>
  </div>
  
  <!-- 5. 轻度警告通知 -->
  <div id="style5" class="blackroom-style">
    <div class="container">
      <div class="blackroom-card">
        <span class="warning-badge">警告</span>
        <div class="icon-container">
          <i class="fa fa-exclamation-circle"></i>
        </div>
        <h1 class="title">请注意您的行为</h1>
        <p class="description">
          您的近期行为接近社区规定的边界，请遵守社区规范，避免账号受到限制。
        </p>
        
        <div class="details">
          <div class="detail-item">
            <div class="detail-label">警告原因：</div>
            <div class="detail-value">评论内容可能引起不适</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">记录时间：</div>
            <div class="detail-value">2023-10-28 14:25</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">累计警告：</div>
            <div class="detail-value">1次（3次将触发限制）</div>
          </div>
        </div>
        
        <button class="btn btn-primary">查看具体内容</button>
        <button class="btn btn-secondary">我知道了</button>
      </div>
    </div>
  </div>
  
  <!-- 6. 身份验证提醒 -->
  <div id="style6" class="blackroom-style">
    <div class="container">
      <div class="blackroom-card">
        <div class="icon-container">
          <i class="fa fa-id-card"></i>
        </div>
        <h1 class="title">完成身份验证以解除限制</h1>
        <p class="description">
          您的账号尚未完成身份验证，部分功能已被限制。完成验证即可正常使用所有功能。
        </p>
        
        <div class="verification-steps">
          <div class="step">
            <div class="step-number">1</div>
            <div class="step-content">
              <div class="step-title">提交身份信息</div>
              <div class="step-desc">上传身份证正反面照片</div>
            </div>
          </div>
          <div class="step">
            <div class="step-number">2</div>
            <div class="step-content">
              <div class="step-title">人脸识别</div>
              <div class="step-desc">完成实时人脸验证</div>
            </div>
          </div>
          <div class="step">
            <div class="step-number">3</div>
            <div class="step-content">
              <div class="step-title">审核通过</div>
              <div class="step-desc">通常在24小时内完成审核</div>
            </div>
          </div>
        </div>
        
        <button class="btn btn-primary">立即验证</button>
        <button class="btn btn-secondary">稍后验证</button>
        
        <a href="#" class="appeal-link">为什么需要身份验证？</a>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 样式切换功能
    document.querySelectorAll('.style-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        // 更新按钮状态
        document.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        // 显示对应的样式页面
        const styleId = this.getAttribute('data-style');
        document.querySelectorAll('.blackroom-style').forEach(style => {
          style.style.display = 'none';
        });
        document.getElementById(styleId).style.display = 'block';
      });
    });
    
    // 倒计时功能模拟
    function updateCountdown() {
      const countdownEl = document.getElementById('countdown');
      if (!countdownEl) return;
      
      const timeStr = countdownEl.textContent;
      const [hours, minutes, seconds] = timeStr.split(':').map(Number);
      
      let totalSeconds = hours * 3600 + minutes * 60 + seconds;
      totalSeconds--;
      
      if (totalSeconds < 0) totalSeconds = 0;
      
      const newHours = Math.floor(totalSeconds / 3600).toString().padStart(2, '0');
      const newMinutes = Math.floor((totalSeconds % 3600) / 60).toString().padStart(2, '0');
      const newSeconds = (totalSeconds % 60).toString().padStart(2, '0');
      
      countdownEl.textContent = `${newHours}:${newMinutes}:${newSeconds}`;
    }
    
    // 每秒钟更新一次倒计时
    setInterval(updateCountdown, 1000);
    
    // 初始化 - 隐藏所有样式，只显示默认样式
    document.querySelectorAll('.blackroom-style').forEach((style, index) => {
      if (index !== 0) {
        style.style.display = 'none';
      } else {
        style.style.display = 'block';
      }
    });
  </script>
</body>
</html>
